<template>
  <div v-if="bookingList.length > 0">
    <div v-if="!isFromScheduling">
      <div class="c-flex-row c-aligni-center c-justify-sb c-pb20 c-ph24 c-bd-b1">
        <div class="c-fw-b c-p c-fs26 c-fc-xblack">{{isFromForm ? '请修改预约时间' : '预约时间'}}</div>
        <div class="c-ww72 c-flex-row c-flex-center" @click="clickMoreDay" v-if="timeType != 1 && dateType == 2">
          <div class="c-fs20 c-fc-sblack">{{currentMonth}}月</div>
          <div class="c-f24 c-fc-sblack iconfont" :class="openCalendarModal ? '' : 'c-rotate180'">&#xe67a;</div>
        </div>
      </div>
      <!-- 自选时间--按分钟预约时间间隔 dateType == 1 && timeType == -1 -->
      <div v-if="showTime">
        <div class="c-text-hidden c-ph24 c-pt30 c-pb130">
          <div v-for="item in timeList" :key="item.atmId" class="c-w50 fl">
            <div class="c-justify-center c-flex-row c-hh60 c-lh60  c-br8 c-fs22 c-mb30 c-mh12" :class="item.status == 0 || item.isFull == 1 || item.isEnroll == 1 || item.isOverdue == 1 ? 'c-fc-gray time-list' : atmId == item.atmId ? 'theme-bg c-fc-white' : 'c-fc-xblack time-list'"
              @click="chooseTime(item, 0)">
              {{item.startAt.substring(0,5)}}-{{item.endAt.substring(0,5)}}<span
                class="c-ml4 c-mr4">|</span><span class="">{{item.status == 0 ? '停' : item.isEnroll == 1 ? '已约' : item.isFull == 1 ? '满' : item.number}}</span>
            </div>
          </div>
        </div>
        <slot></slot>
      </div>
      <div v-else>
        <div class="c-mh-16 c-text-hidden c-ph24" v-if="timeType == 1">
          <div v-for="(item, index) in bookingList" :key="index" class="c-w50 fl">
            <div @click="clickChooseDate(item)" class="c-justify-center c-aligni-center c-flex-column c-hh92 c-br8 c-fs24 c-mt30 c-mh16" :class="date == item.date ? 'theme-fc theme-bd1 theme-bg-10' : item.type == 0 || item.status == 0 ? 'c-fc-gray c-bg-f2 c-bd1' : 'c-fc-xblack c-bg-f2 c-bd1'">
              <div class="c-flex-row c-justify-center">
                <span class="c-mr12 c-lh28">{{item.date.substr(5,5)}}</span><span class="c-lh">{{item.week}}</span>
              </div>
              <div class="c-flex-row c-justify-center c-mt6">
                <span class="c-mr12">{{item.startAt.substring(0,5)}}-{{item.endAt.substring(0,5)}}</span><span :class="[date == item.date ? 'theme-fc' : item.type == 0 ? 'c-fc-gray' : 'c-fc-xblack', item.status == 0 || item.isEnroll == 1 || item.isFull == 1 ? 'c-fs22 c-lh' : '']">{{item.status == 0 ? '停' : item.isEnroll == 1 ? '已约' : item.isFull == 1 ? '满' : item.number}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 按天计算 -->
        <div class="c-text-hidden c-ph12" v-if="timeType != 1 && dateType == 1">
          <div v-for="item in bookingList" :key="item.date" class="c-w50 fl c-p">
            <div class="c-justify-center c-flex-row c-hh60 c-lh60  c-br8 c-fs22 c-mt30 c-mh12" :class="item.type == 0 ? 'c-fc-gray time-list' : date == item.date ? 'theme-bg c-fc-white' : 'c-fc-xblack time-list'" @click="clickChooseDate(item)">
              <span class="c-mr20">{{item.date.substr(5,5)}}</span><span>{{item.week}}</span><span v-if="timeType == 1"><span class="c-fc-sgray c-ml4 c-mr4">|</span>{{item.number}}</span>
            </div>
          </div>
        </div>
        <!-- 按分钟计算 -->
        <div v-if="timeType != 1 && dateType == 2" class="c-ph24 c-pt20">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <div @click="clickWeekDay(item)" v-for="(item, index) in myCalendarList" :key="index" class="c-ww68 c-hh76 c-flex-column c-flex-center c-br8" :class="date == item.date ? 'theme-bg' : ''">
              <div class="c-fs24 c-fw600" :class="date == item.date ? 'c-fc-white' : item.type == 1 ? 'c-fc-xblack' : 'c-fc-gray'">{{item.week}}</div>
              <div class="c-fs20 c-fw600 c-mt8" :class="date == item.date ? 'c-fc-white' : item.type == 1 ? 'c-fc-xblack' : 'c-fc-gray'">{{item.day}}</div>
            </div>
          </div>
          <div class="c-mt30 c-mh-10 c-flex-row c-flexw-wrap">
            <template v-if="!isLoading">
              <div class="c-mb20 c-p" :class="timeType == 1 ? 'c-w50' : 'c-w25'" v-for="(item, index) in timeList" :key="index" @click="chooseTime(item, 1)">
                <div class="c-mh10 c-hh52 c-flex-row c-flex-center c-fs24 c-br8" :class="atmId == item.atmId ? 'theme-fc theme-bd1 theme-bg-10' : item.status == 0 || item.isFull == 1 || item.isEnroll == 1 || item.isOverdue == 1 ? 'c-fc-gray c-bg-f2 c-bd1' : 'c-bg-f2 c-bd1 c-fc-xblack'">
                  <span class="">{{timeType == 1 ? `${item.startAt.substring(0,5)}~${item.endAt.substring(0,5)}` : item.startAt.substring(0,5)}}</span>
                  <span class="c-ml8" :class="[atmId == item.atmId ? 'theme-fc' : item.isOverdue == 1 ? 'c-fc-gray' : 'c-fc-xblack', item.status == 0 || item.isEnroll == 1 || item.isFull == 1 ? 'c-fs22 c-lh' : '']">{{item.status == 0 ? '停' : item.isEnroll == 1 ? '已约' : item.isFull == 1 ? '满' : item.number}}</span>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="c-p c-mb40" v-else>
      <div v-if="timeType == 1">
        <div class="c-fs28 c-fc-xblack c-fw600 c-pb20 c-ph24 c-bd-b1">预约时段</div>
        <div class="c-mh-16 c-text-hidden c-pt20 c-ph24">
          <div v-for="(item, index) in bookingList" :key="index" @click="clickEdit(1, item, index)" class="c-w50 fl c-p">
            <div :class="index == selectedEditIndex ? 'theme-fc theme-bg-10 theme-bd1' : item.isOverdue == 1 || item.status == 0 || teacherStatus == 0 ? 'c-fc-gray c-bg-f2 c-bd1' : 'c-fc-xblack c-bg-f2 c-bd1'" class="c-justify-center c-aligni-center c-flex-column c-hh92 c-br8 c-fs24 c-mb30 c-mh16">
              <div class="c-flex-row c-justify-center">
                <span class="c-mr12 c-lh28">{{item.date.substr(5,5)}}</span><span class="c-lh">{{item.week}}</span>
              </div>
              <div class="c-flex-row c-justify-center c-mt6">
                <span class="c-mr12">{{item.startAt.substring(0,5)}}-{{item.endAt.substring(0,5)}}</span><span :class="index == selectedEditIndex ? 'theme-fc' : 'c-fc-xblack'">{{item.status == 0 ? '停' : item.isFull == 1 ? '满' : item.number}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="c-fs28 c-fc-xblack c-fw600 c-pb20 c-ph24 c-bd-b1">预约时段</div>
        <div class="c-pt20 c-ph24">
          <div class="c-mb20" v-for="(item, index) in bookingList" :key="index">
            <div class="c-fs26 c-fc-xblack c-fw600">{{item.date.substr(5,2)}}月{{item.date.substr(8,2)}}日</div>
            <div class="c-mt20 c-mh-10 c-clearfix" v-if="item.times">
              <div v-for="(tItem, tIndex) in item.times" :key="tIndex" @click="clickEdit(0, tItem, tIndex, index)" class="c-w25 fl c-mb20 c-p">
                <div :class="tIndex == selectedEditIndex && index == selectedEditPIndex ? 'theme-fc theme-bg-10 theme-bd1' : tItem.isOverdue == 1 || tItem.status == 0 || teacherStatus == 0 ? 'c-fc-gray c-bg-f2 c-bd1' : 'c-fc-xblack c-bg-f2 c-bd1'" class="c-mh10 c-hh52 c-flex-row c-flex-center c-fs24 c-br8">
                  <span class="">{{tItem.startAt.substring(0,5)}}</span>
                  <span class="c-ml12" :class="tIndex == selectedEditIndex && index == selectedEditPIndex ? 'theme-fc' : tItem.isOverdue == 1 ? 'c-fc-gray' : 'c-fc-xblack'">{{tItem.status == 0 ? '停' : tItem.isFull == 1 ? '满' : tItem.number}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-pt30 c-textAlign-c c-fc-gray c-fs24" :class="isLoading ? 'c-hh500' : ''" v-if="isLoading">{{isLoading ? '加载中...' : ''}}</div>
    <open-modal class="c-pz100-im" :openModal="openCalendarModal" @closeModal="closeopenCalendarModal">
      <div class="c-bg-white c-br-tl32 c-br-tr32 c-text-hidden c-maxw640 c-pb20 c-p">
        <div @click="closeopenCalendarModal" class="c-fs28 c-fc-gray iconfont c-p-t24 c-p-r24 c-pa">&#xe84e;</div>
        <div class="c-pv40 c-flex-row c-flex-center">
          <span @click="clickPrevMonth" :class="canGoPrev ? 'theme-fc':'c-fc-gray'" class="iconfont c-fs18 c-rotate90">&#xe70b;</span>
          <span class="c-ph52 c-fs32">{{selectedMonth}}</span>
          <i @click="clickNextMonth" :class="canGoNext ? 'theme-fc':'c-fc-gray'" class="iconfont c-fs18 c-rotate270">&#xe70b;</i>
        </div>
        <div class="c-flex-row c-fs20 c-fc-sblack c-textAlign-c c-ph24">
          <div class="c-flex-grow1 c-w0">日</div>
          <div class="c-flex-grow1 c-w0">一</div>
          <div class="c-flex-grow1 c-w0">二</div>
          <div class="c-flex-grow1 c-w0">三</div>
          <div class="c-flex-grow1 c-w0">四</div>
          <div class="c-flex-grow1 c-w0">五</div>
          <div class="c-flex-grow1 c-w0">六</div>
        </div>
        <div class="c-flex-row c-flexw-wrap c-pt8 c-ph24">
          <div @click="clickCalendarDay(item)" v-for="(item) in dataList" v-bind:key="item.date" class="date-list-item">
            <span :class="[calendarSelectDate == item.date && item.date ? 'c-fc-white' : item.type == 1 ? 'c-fc-xblack': 'c-fc-gray', calendarSelectDate == item.date && item.date ? 'theme-bg' : '']"
              class="c-ww40 c-hh40 c-flex-row c-flex-center c-brp50">{{item.day}}</span>
          </div>
        </div>
        <div @click="confirmCalendarDay" class="c-fs28 c-fc-white c-hh64 c-mh24 c-flex-row c-flex-center c-mt40 c-br32 theme-bg ">确定</div>
      </div>
    </open-modal>
    <loading-status-tem :noDataText="'暂无可预约时间'" :noData="bookingList == null || bookingList.length == 0"></loading-status-tem>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
const ONE_DAY_TIMES_TAMP = 24 * 60 * 60 * 1000; //一天的时间毫秒数
export default {
  name: "timePicker",
  components: {
    OpenModal,
    loadingStatusTem
  },
  props: {
    bookingList: {
      type: Array,
      default: () => {
        return []
      },
    },
    timeType: {
      type: Number,
      default: 1,
    },
    dateType: {
      type: Number,
      default: 1,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    date: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      isLoading: true, // 加载状态
      atmId: '',
      openCalendarModal: false,
      curSelectDate: "", //当前选择的日期 2018/11
      canGoNext: false, //是否可以切换上个月
      canGoPrev: false, //是否可以切换下个月
      myCalendarList: [],
      calendarSelectDate: '',
      selectedMonth: '',
      selectIndex: -1, // 点击选择日期索引
      isFromForm: false, // 来源预约表单
      showTime: false, // 自选时间--按分钟预约时间间隔
    }
  },
  mounted() {
  },
  methods: {
    // 初始化日期选择
    publicInitData(info) {
      console.log(info);
      this.bookingList = info.bookingList || []; // 预约时间列表
      this.dateType = info.dateType || 1; // 1:按日期展示，2: 按星期展示
      this.timeType = info.timeType || 0; // 1：不限日期，2：指定日期范围，3：自选时间
      this.date = info.date || ''; // 选择日期
      this.atmId = info.atmId || '';
      this.isLoading = false;
      this.enableEnroll = info.enableEnroll || false; // 是否可预约
      this.atId = info.atId || '';
      this.curSelectDate = info.curSelectDate || ''; // 当前选择日期
      this.currentMonth = new Date(this.curSelectDate).getMonth() + 1;
      this.openCalendarModal = false; // 半弹窗显示预约时间
      this.isFromScheduling = info.isFromScheduling || false; // 来源于排班情况
      this.teacherStatus = info.teacherStatus || 0; // 教师状态
      this.showTime = info.showTime || false; // 按分钟选择时间段
      this.identity = info.identity || 0; // 身份
      this.calendarSelectDate = '';
      this.isFromDetail = info.isFromDetail || 0 // 是否是来自详情页的时间预约展示
      if (this.timeType != 1 && this.dateType == 2 && !this.isFromScheduling) {
        this.getDateInfo();
        this.getTime(this.date, 2);
      }
      if (this.showTime) {
        this.getTime(this.date);
      }
    },
    clickEdit(isAllDay, eItem, eIndex, pIndex) {
      this.$emit('clickEdit', isAllDay, eItem, eIndex, pIndex)
    },
    // 获取当前日期的可选时间段
    getTime(date, isFrom = 1) {
      return new Promise((resolve, reject) => {
        if (this.isLoading) {
          return;
        }
        this.isLoading = true;
        utilJs.getMethod(`${global.apiurl}appointment/getTimeList?atId=${this.atId}&date=${date}`, res => {
          this.isLoading = false;
          this.timeList = res; //可预约时间;
          if (isFrom == 1) {
            this.$emit('showBookTime', this.timeList)
          }
          resolve()
        }, failRes => {
          this.isLoading = false;
          reject()
        });
      })
    },
    closeopenCalendarModal() {
      this.openCalendarModal = false;
      this.$emit('closeopenCalendarModal')
    },
    clickMoreDay() {
      this.openCalendarModal = true;
      this.calendarSelectDate = this.date ? this.date : '';
      this.selectedMonth = utilJs.dateFormat(this.curSelectDate, '/').substring(0, 7);
      this.drawDate(this.selectedMonth);
      this.canGoPrevOrNext();
      this.$emit('clickMoreDay')
    },
    confirmCalendarDay() {
      if (!this.calendarSelectDate) {
        this.$showCjToast({
          text: "请选择日期",
          type: "warn",
          time: 3000
        });
        return;
      }
      this.date = this.calendarSelectDate;
      this.curSelectDate = this.calendarSelectDate;
      this.currentMonth = new Date(this.curSelectDate).getMonth() + 1;
      this.getDateInfo();
      this.getTime(this.calendarSelectDate, 2);
      this.atmId = '';
      this.openCalendarModal = false;
      this.$emit('closeopenCalendarModal')
      let data = {
        date: this.date,
        bookingList: this.bookingList,
        isFromDetail: this.isFromDetail
      }
      this.$emit("confirmCalendarDay", data)
    },
    clickPrevMonth() {
      if (!this.canGoPrev) {
        return;
      }
      let selectArr = this.selectedMonth.split("/");
      let prevMonth = selectArr[1] - 1;
      let prevYear = selectArr[0];
      if (prevMonth <= 0) {
        prevMonth = prevMonth + 12;
        prevYear = prevYear - 1;
      }
      prevMonth = prevMonth < 10 ? `0${prevMonth}` : prevMonth;
      this.selectedMonth = `${prevYear}/${prevMonth}`;
      this.canGoPrevOrNext();
      this.drawDate(this.selectedMonth);
    },
    clickNextMonth() {
      if (!this.canGoNext) {
        return;
      }
      let selectArr = this.selectedMonth.split("/");
      let prevMonth = selectArr[1] * 1 + 1;
      let prevYear = selectArr[0] * 1;
      if (prevMonth > 12) {
        prevMonth = prevMonth - 12;
        prevYear = prevYear + 1;
      }
      prevMonth = prevMonth < 10 ? `0${prevMonth}` : prevMonth;
      this.selectedMonth = `${prevYear}/${prevMonth}`;
      this.canGoPrevOrNext();
      this.drawDate(this.selectedMonth);
    },
    canGoPrevOrNext() {
      let startYear = this.bookingList[0].date.split('-')[0] * 1;
      let endYear = this.bookingList[this.bookingList.length - 1].date.split('-')[0] * 1;
      let curYear = this.selectedMonth.split('/')[0] * 1;
      let startMouth = this.bookingList[0].date.split('-')[1] * 1;
      let endMouth = this.bookingList[this.bookingList.length - 1].date.split('-')[1] * 1;
      let curMouth = this.selectedMonth.split('/')[1] * 1;
      this.canGoPrev = curYear > startYear || (curYear == startYear && curMouth > startMouth);
      this.canGoNext = curYear < endYear || (curYear == endYear && curMouth < endMouth);
    },
    //绘制当前月份的日历
    drawDate(dateStr) {
      let dateAtr = []; //日历数组
      //IOS无法转化2018/11
      dateStr = dateStr + '/01';
      let curDate = new Date(dateStr); //获取当前日期
      let curMonth = curDate.getMonth() + 1;
      let firstDayTimesTamp = curDate.getTime(); ///获取本月第一天时间戳
      let firstDayWeek = curDate.getDay(); //获取本月第一天是星期几
      let nowDayStr = utilJs.dateFormat(+new Date()); //获取今天的日期
      //如果本月第一天不是周日即firstDayWeek > 0 则将多出来的天数添加到日历数组内
      for (let i = firstDayWeek; i > 0; i--) {
        let item = {
          type: 0,
          day: "",
          date: "",
        };
        dateAtr.push(item);
      }
      //遍历所有剩下的天数添加到数组内，使得数组长度等于42（ 7 * 6）
      for (let j = 0; j < 42 - firstDayWeek; j++) {
        //获取当前天数时间戳
        let itemTimeTamp = firstDayTimesTamp + j * ONE_DAY_TIMES_TAMP;
        //获取当天日期对象
        let itemTimeDate = new Date(itemTimeTamp);
        //格式化当前日期为YYYY-MM-DD
        let itemDateStr = utilJs.dateFormat(itemTimeTamp);
        //获取当前天数月份
        let itemMonth = itemTimeDate.getMonth() + 1;
        if (itemMonth != curMonth) {
          break;
        }
        //获取当天为几号
        let itemDay = itemTimeDate.getDate();
        //判断当前是否为今天
        if (itemDateStr == nowDayStr) {
          itemDay = "今";
        }
        let itemType = 0;
        for (let key of this.bookingList) {
          if (key.date == itemDateStr) {
            itemType = 1;
          }
        }
        let item = {
          type: itemType,
          date: itemDateStr,
          day: itemDay,
        };
        dateAtr.push(item);
      }
      this.dataList = dateAtr;
    },
    // 绘制本周日历
    getDateInfo() {
      let dateArr = [];
      //获取今天的时间 2018-11-23
      let nowDateStr = utilJs.dateFormat(+new Date());
      let curDate = new Date(this.curSelectDate.replace(/-/g, "/"));
      //当前选中的日期时间戳
      let curDateTamp = new Date(
        this.curSelectDate.replace(/-/g, "/")
      ).getTime();
      let nowWeek = curDate.getDay();
      let startTimeTamp = new Date(
        nowDateStr.replace(/-/g, "/")
      ).getTime();
      let weekMap = {
        0: "周日",
        1: "周一",
        2: "周二",
        3: "周三",
        4: "周四",
        5: "周五",
        6: "周六"
      };
      for (let i = 0; i < 7; i++) {
        let subDayTamp = (i - nowWeek) * ONE_DAY_TIMES_TAMP;
        //本周第i天的时间戳
        let itemTamp = curDateTamp + subDayTamp;
        let itemDate = new Date(itemTamp);
        let itemDay = itemDate.getDate();
        let itemMonth = itemDate.getMonth() + 1;
        let itemYear = itemDate.getFullYear();
        itemMonth = itemMonth < 10 ? `0${itemMonth}` : itemMonth;
        itemDay = itemDay < 10 ? `0${itemDay}` : itemDay;
        //第i天日期
        let strDate = `${itemYear}-${itemMonth}-${itemDay}`;
        let itemType = 0;
        if (itemTamp < startTimeTamp) {
          itemType = 0;
        }

        for (let key of this.bookingList) {
          if (key.date == strDate && key.isFull != 1 && key.isEnroll != 1) {
            itemType = 1;
          }
        }
        let dateItem = {
          type: itemType,
          week: weekMap[i],
          day: itemMonth + '.' + itemDay,
          date: strDate
        };
        dateArr.push(dateItem);
      }
      this.myCalendarList = dateArr;
    },
    clickCalendarDay(choosedItem) {
      if (choosedItem.type != 1) {
        return;
      }
      this.calendarSelectDate = choosedItem.date;
    },
    chooseTime(item, isFromCalendar) {
      let { atmId, startAt, endAt, isFull, isEnroll, isOverdue, status: canEnroll, date } = item;
      if (isFull != 1 && isEnroll != 1 && isOverdue != 1 && canEnroll != 0) {
        if (this.enableEnroll != 1) {
          this.$showCjToast({
            text: "您已超过可预约次数",
            type: "warn",
            time: 3000
          });
          return;
        }
        this.atmId = atmId;
        this.startAt = startAt.substring(0, 5);
        this.endAt = endAt.substring(0, 5);
        if (isFromCalendar == 1) {
          if (isFull != 1 && isEnroll != 1 && isOverdue != 1 && canEnroll != 0) {
            if (this.enableEnroll != 1) {
              this.$showCjToast({
                text: "您已超过可预约次数",
                type: "warn",
                time: 3000
              });
              return;
            }
            this.atmId = atmId;
            this.startAt = startAt.substring(0, 5);
            this.endAt = endAt.substring(0, 5);
          }
        }
        let data = {
          date: date,
          atmId: this.atmId,
          startAt: this.startAt,
          endAt: this.endAt,
        }
        this.$emit('chooseTime', data)
      }
    },
    clickChooseDate(item) {
     let { startAt, endAt, date, type, atmId, isFull, isEnroll, status} = item;
      this.startAt = '';
      this.endAt = '';
      this.atmId = '';
      if (this.timeType == 1) {
        if (isFull != 1 && isEnroll != 1 && status != 0) {
          if (this.enableEnroll != 1) {
            this.$showCjToast({
              text: "您已超过可预约次数",
              type: "warn",
              time: 3000
            });
            return;
          }
          if (type == 0) {
            return;
          }
          console.log(startAt, endAt);
          this.startAt = startAt.substring(0, 5);
          this.endAt = endAt.substring(0, 5);
          this.date = date;
          this.atmId = atmId;
        }
      } else {
        this.date = date;
        if (type) {
          this.atmId = '';
        }
      }
      let data = {
        date: this.date,
        atmId: this.atmId,
        startAt: this.startAt,
        endAt: this.endAt,
        type: type,
        showTime: this.timeType != 1 && item.type && !startAt && !endAt,
      }
      this.$emit('clickChooseDate', data)
    },
    clickWeekDay(item) {
      if (this.date == item.date) {
        return;
      }
      if (item.type) {
        this.atmId = '';
        this.date = item.date;
      }
      let data = {
        atmId: this.atmId,
        date: this.date,
        type: item.type
      }
      if (data.type) {
      this.getTime(data.date, 2);
    }
      this.$emit('clickWeekDay', data)
    }
  },
}
</script>

<style>
.c-mh12 {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}
.c-mh-12 {
  margin-left: -0.3rem;
  margin-right: -0.3rem;
}
.c-mh-16 {
  margin-left: -0.4rem;
  margin-right: -0.4rem;
}
.c-mh-10 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.c-mh16{
  margin-left: 0.4rem; margin-right: 0.4rem;
}
.date-list-item {
  width: 14.2857%;
  height: 2.15rem;
  line-height: 2.15rem;
  font-size: 0.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.time-list {
  background: #f5f6f6;
}
.pz100-im {
  z-index: 100 !important;
}
</style>
